<template>
	<view class="wrap">
		<!-- logo -->
		<view class="layout-hd flex direction-column justify-center align-center">
			<u-image src="/static/image/default.png" width="120rpx" height="120rpx" shape="circle"></u-image>
			<view class="text m-top-10">平台名称</view>
		</view>
		<!-- 用户 -->
		<view class="layout-login flex align-center">
			<view class="hd">
				<u-image src="/static/image/default.png" width="100rpx" height="100rpx" shape="circle"></u-image>
			</view>
			<view class="user flex-1 p-left-20">
				<template v-if="isLogin">
					<view class="text text-single">用户微信昵称</view>
					<view class="number flex justify-start align-center m-top-10">
						<image class="icon m-right-10" src="/static/image/bei.png" mode=""></image>
						<text class="fen">35分</text>
					</view>
				</template>
				<button 
					v-if="!isLogin"
					class="login-btn" 
					plain="true" 
					hair-line="false" 
					hover-class="false"
					@click="handLogin"
				>请点击登录</button>
			</view>
			<view class="farm">
				<view class="n">100</view>
				<view class="t m-top-10">对战（局）</view>
			</view>
			<view class="farm m-left-10">
				<view class="n">100</view>
				<view class="t m-top-10">胜场（局）</view>
			</view>
		</view>
		<!-- 选择模式 -->
		<view class="layout-room flex justify-between flex-wrap">
			<!-- 瀑布流布局，自动插入 -->
			<u-waterfall v-model="roomList">
				<template v-slot:left="{leftList}">
					<view class="item" v-for="(item, index) in leftList" :key="index" @click="roomLink(item)">
						<image class="icon" :src="item.image" mode="widthFix"></image>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="item" v-for="(item, index) in rightList" :key="index" @click="roomLink(item)">
						<image class="icon" :src="item.image" mode="widthFix"></image>
					</view>
				</template>
			</u-waterfall>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="isPopup" mode="center" :closeable="true" @close="isPopup = false">
			<view class="popup-box">
				<view class="pk-title">选择PK类型</view>
				<view class="pk-btn flex justify-center align-center" @click="pkLink">
					<image class="icon" src="/static/image/pk-1.png" mode=""></image>
					<text class="text m-left-20">双人房间</text>
				</view>
				<view class="pk-btn flex justify-center align-center" @click="multipleLink">
					<image class="icon" src="/static/image/pk-2.png" mode=""></image>
					<text class="text m-left-20">多人房间</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	
	export default {
		components: {
			
		},
		data() {
			return {
				isLogin: false,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				isPopup: false,
				roomList: [
					{
						id: 1,
						ispk: false,
						text: '自由匹配对战',
						image: '/static/image/room-1.png',
						page: '/pages/battle/wait'
					},
					{
						id: 2,
						ispk: false,
						text: '题库列表',
						image: '/static/image/room-2.png',
						page: '/pages/index/bank'
					},
					{
						id: 3,
						ispk: false,
						text: '个人练习',
						image: '/static/image/room-3.png',
						page: '/pages/me/bank'
					},
					{
						id: 4,
						ispk: true,
						text: '好友PK',
						image: '/static/image/room-4.png',
						page: '/pages/battle/wait'
					},
					{
						id: 5,
						ispk: false,
						text: '设置',
						image: '/static/image/room-5.png',
						page: '/pages/rank/install'
					},
				]
			}
		},
		methods: {
			handLogin() {
				this.isLogin = true
			},
			roomLink(val) {
				if (val.ispk && val.ispk == true) {
					this.isPopup = true
				} else {
					const url = val.page
					uni.navigateTo({ url: url })
				}
			},
			pkLink() {
				this.isPopup = false
				this.$u.route('/pages/pk/wait')
			},
			multipleLink() {
				this.isPopup = false
				this.$u.route('/pages/multiple/wait')
			},
		},
		onLoad() {
			
		},
	}
</script>

<style lang="scss">
	.layout-hd {
		padding: 20rpx 36rpx 10rpx;
		.text {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #ffffff;
			text-align: center;
		}
	}
	.layout-login {
		margin: 0 36rpx;
		height: 164rpx;
		padding: 36rpx;
		border-radius: 10rpx;
		background-image: linear-gradient(#0094FF, #B8E2FF);
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		box-sizing: border-box;
		.icon {
			width: 40rpx;
			height: 40rpx;
		}
		.text {
			font-size: 36rpx;
			line-height: 40rpx;
			color: #ffffff;
		}
		.fen {
			font-size: 32rpx;
			font-weight: bold;
			line-height: 40rpx;
			color: #FC2A2A;
		}
	}
	.farm {
		font-size: 36rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #ffffff;
		text-align: center;
		.n {
			font-size: 32rpx;
		}
	}
	.layout-room {
		margin: 36rpx 36rpx;
		.item {
			margin: 10rpx 10rpx;
			width: 336rpx;
			height: auto;
			overflow: hidden;
			.icon {
				width: 100%;
				height: auto;
			}
		}
	}
	.popup-box {
		width: 500rpx;
		height: auto;
		padding: 60rpx 0 80rpx;
		overflow: hidden;
		.pk-title {
			padding-bottom: 20rpx;
			font-size: 36rpx;
			line-height: 52rpx;
			color: #101010;
			text-align: center;
		}
		.pk-btn {
			margin: 40rpx auto 0;
			width: 320rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 40rpx;
			background: #0197F8;
			.icon {
				width: 50rpx;
				height: 50rpx;
			}
			.text {
				font-size: 32rpx;
				line-height: 40rpx;
				color: #ffffff;
			}
		}
	}
	.login-btn {
		float: left;
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		font-size: 36rpx;
		font-weight: 600;
		text-align: left;
		color: #ffffff !important;
		background: transparent;
		border-color: transparent !important;
	}
</style>
